<template>
  <view class="service-grid">
	<text class="section-title">一键报修</text>
    <view class="service-card">
      <view class="service-items">
        <view 
          class="service-item" 
          v-for="(item, index) in serviceItems" 
          :key="index"
          @click="handleItemClick(item)"
        >
          <image class="service-icon" :src="item.icon" mode="aspectFit"></image>
          <text class="service-text">{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  serviceItems: {
    type: Array,
    default: () => [
    { title: '加油机', icon: '/static/service/service-jyj.png', type: 'gas' },
    { title: '在线监测', icon: '/static/service/service-zxjc.png', type: 'monitor' },
    { title: '二次回收', icon: '/static/service/service-ech.png', type: 'recycle' },
    { title: '潜油泵', icon: '/static/service/service-qyb.png', type: 'pump' },
    { title: '液位仪', icon: '/static/service/service-ywy.png', type: 'level' },
    { title: '三次回收', icon: '/static/service/service-sch.png', type: '3recycle' },
    { title: '后台管理系统', icon: '/static/service/service-htg.png', type: 'background' },
    { title: '油管及管道测漏系统', icon: '/static/service/service-ygj.png', type: 'youtube' },
    { title: '其他', icon: '/static/service/service-other.png', type: 'other' }
    ]
  }
})

const emit = defineEmits(['itemClick'])

const handleItemClick = (item) => {
  emit('itemClick', item)
}
</script>

<style scoped>
.service-grid {
 padding: 40rpx;
 background: #FFFFFF;
/* background: greenyellow; */
 border-radius: 20rpx;
 box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
 margin-bottom: 20rpx;
}
.section-title {
 font-family: PingFangSC-Medium;
 font-size: 28rpx;
 color: #000000;
 letter-spacing: 0;
 font-weight: 500;
}

.service-card {
  /* background: #FFFFFF; */
   margin-top: 40rpx;
/*  background: indianred; */
  padding: 0rpx;
}

.service-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 82rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
/*  background-color: royalblue; */
  
}

.service-icon {
  width: 72rpx;
  height: 72rpx;
}

.service-text {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
</style> 